<template>
  <div class="content-card">
    <div class="title">
      <div class="front">
        <a-icon type="tags"></a-icon>
        <span>{{ "数据质检治理情况" }}</span>
      </div>
      <div class="back">{{ "总量" }}</div>
    </div>
    <div class="body">
      <div id="data-quality__chart1"></div>
    </div>
  </div>
</template>

<script>
import API from "@/api/quality";
export default {
  name: "q3-chart",
  data() {
    return {
      xdata: [],
      ydata: [
        {
          name: "质检总量",
          type: "bar",
          barWidth: 10,
          data: [],
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#7F68FF" },
            { offset: 1, color: "#BFB3FF" },
          ]),
        },
        {
          name: "质检通过数",
          type: "bar",
          barWidth: 10,
          data: [],
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#3191FF" },
            { offset: 1, color: "#70BDFF" },
          ]),
        },
      ],
    };
  },
  methods: {
    registerAndSetCharts1() {
      let charts1Ref = this.$echarts.init(
        document.getElementById("data-quality__chart1")
      );
      let option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
          dataZoom: [
              {
                  id: 'dataZoomX',
                  type: 'slider',
                  show: true,
                  xAxisIndex: [1],
                  filterMode: 'filter'
              },{
                  type: 'inside',// 内置于坐标系中
                  start: 0,
                  end: 30,
                  xAxisIndex: [0]
              },
          ],

          legend: {
          top: "5%",
        },
        grid: {
          left: "5%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        yAxis: {
          name: "(条)",
          type: "value",
          boundaryGap: [0, 0.1],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#777",
            },
          },
        },
        xAxis: {
          type: "category",
          data: this.xdata,
          axisTick: {
            show: false,
          },
        },
        series: this.ydata,
      };
      charts1Ref.setOption(option1);
    },
    changedata(arr) {
      this.xdata = [];
      this.ydata[0].data = [];
      this.ydata[1].data = [];
      for (let item in arr) {
        this.xdata.push(arr[item].bm);
        this.ydata[0].data.push(arr[item].sjl);
        this.ydata[1].data.push(arr[item].bfb);
      }
      this.registerAndSetCharts1();
    },
    getBoxData() {
      let handleV1 = (res) => this.changedata(res.data.body.data);
      API.getqualityzxt().then(handleV1);
    },

    getTask() {
      return () => {
        this.getBoxData();
      };
    },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    .front {
      i {
        color: #6989c6;
        margin: 0 15px;
        font-size: 18px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
      }
    }
    .back {
      font-size: 14px;
      margin: 0 15px;
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :first-child {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
